<script setup lang="ts">
import * as THREE from 'three'
import Stat from "three/examples/jsm/libs/stats.module"
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'


const w = window.innerWidth
const h = window.innerHeight
const stat = new Stat()

// Scene(场景)
const scene = new THREE.Scene()
// 材质
const material = new THREE.MeshNormalMaterial()
// AxesHelper辅助
const axes = new THREE.AxesHelper(2, 2, 2)
scene.add(axes)

// Object 物体:geometry(几何体)+material(材质，皮肤)
// 整个汽车
const car = new THREE.Group()
// 车身  SphereGeometry 圆形   BoxGeometry立方
const body = new THREE.Group()

const bodyCube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 2, 0.5),
    material
)
const bodyCube2 = new THREE.Mesh(
    new THREE.BoxGeometry(0.5, 0.5, 0.5),
    new THREE.MeshBasicMaterial({color: 0xff0000})
)
bodyCube2.position.z = 0.5
body.add(bodyCube1)
body.add(bodyCube2)
car.add(body)

// 轮子1
const wheelGroup1 = new THREE.Group()
const wheel1 = new THREE.Mesh(
    new THREE.BoxGeometry(0.1, 0.7, 0.7),
    material
)
wheelGroup1.position.set(-0.6, 0.6, 0)
wheelGroup1.add(wheel1)
car.add(wheelGroup1)

// 轮子2
const wheelGroup2 = new THREE.Group()
const wheel2 = new THREE.Mesh(
    new THREE.BoxGeometry(0.1, 0.7, 0.7),
    material
)
wheelGroup2.position.set(0.6, 0.6, 0)
wheelGroup2.add(wheel2)
car.add(wheelGroup2)

const wheelGroup3 = wheelGroup1.clone()
wheelGroup3.position.y = -0.6
car.add(wheelGroup3)
// 轮子4
const wheelGroup4 = wheelGroup2.clone()
wheelGroup4.position.y = -0.6
car.add(wheelGroup4)

// 轮胎
let n = 20;
const circle = new THREE.Group()
for (let i = 0; i < n; i++) {
  let r = 0.5
  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.2)
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.x = r * Math.cos(Math.PI * 2 / n * i)  //360
  mesh.position.y = r * Math.sin(Math.PI * 2 / n * i)
  circle.add(mesh)
}
circle.rotation.y = -0.5 * Math.PI//90
wheelGroup1.add(circle)
wheelGroup2.add(circle.clone())
wheelGroup3.add(circle.clone())
wheelGroup4.add(circle.clone())
scene.add(car)

//Camera 75是个角度 越大广角越大，看到的越多
const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100)
camera.position.set(0, 0, 5)
camera.lookAt(0, 0, 0)//相机朝向

//*renderer---渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(w, h)
renderer.render(scene,camera)
// 将渲染出来的场景添加到页面
document.body.append(renderer.domElement)
document.body.append(stat.dom)

const orbitControls = new OrbitControls(camera, renderer.domElement)

// 让物体动起来
const clock = new THREE.Clock()
tick()

function tick() {
  const time = clock.getElapsedTime() //time 是一个一直均匀增加的值 getElapsedTime考虑到刷新率的
  car.position.y = Math.sin(time) * 2
  car.position.y = time % 4 - 2
  wheelGroup1.rotation.x = -time
  wheelGroup2.rotation.x = -time
  wheelGroup3.rotation.x = -time
  wheelGroup4.rotation.x = -time


  requestAnimationFrame(tick)
  renderer.render(scene, camera)
  stat.update()
  orbitControls.update()
}

</script>

<template>

</template>
